<template>
  <div class="header">
    <div class="aside-toggle">
      <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click="handleToggle"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  components: {

  },
  props: {

  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState({
      isCollapse: state => state.system.asideCollapse
    })
  },
  methods: {
    handleToggle() {
      this.$store.commit('system/TOGGLE_ASIDE_COLLAPSE', !this.isCollapse);
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  box-sizing: border-box;
  background-color: #fff;
  height: 100%;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  .aside-toggle {
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 100%;
    i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
